@base-n: 100;
@base-height: 1080;
@rem-pre-px: 1rem * (@base-n / @base-height);
@animation-time: 1.3s;

@keyframes mapAppear {
  0% {
    opacity: 0;
  }
  70% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes topIn {
  from {
    transform: translate3d(0, -400 * @rem-pre-px, 0);
    opacity: 0.2;
  }
  to {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@keyframes infoViewIn {
  0% {
    transform: translate3d(0, -157 * @rem-pre-px, 0);
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
  100% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@keyframes leftIn {
  0% {
    opacity: 0;
  }
  60% {
    transform: translate3d(-400 * @rem-pre-px, 0, 0);
    opacity: 0;
  }
  100% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@keyframes rightIn {
  0% {
    opacity: 0;
  }
  60% {
    transform: translate3d(400 * @rem-pre-px, 0, 0);
    opacity: 0;
  }
  100% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@keyframes bottomIn {
  from {
    transform: translate3d(0, 400 * @rem-pre-px, 0);
    opacity: 0.2;
  }
  to {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

.asset-map {
  .map {
    animation: mapAppear 2.4s ease;
  }
  .top {
    animation: topIn @animation-time ease;
  }
  .info-review-wrapper {
    animation: infoViewIn 2s ease;
  }
  .left-top,
  .search {
    animation: leftIn @animation-time ease;
  }
  .left-bottom {
    animation: leftIn 1.1 * @animation-time ease;
  }
  .right-top {
    animation: rightIn @animation-time ease;
  }
  .right-bottom {
    animation: rightIn 1.1 * @animation-time ease;
  }
  .bottom {
    animation: bottomIn @animation-time ease;
  }
}
